<template>
  <ant-modal
    modalWidth="900"
    modalHeight="600"
    :visible="open"
    :modal-title="formTitle"
    :adjust-size="true"
    @cancel="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules" slot="content" layout="vertical">
      <a-spin :spinning="loading">
        <a-row :gutter="32">
          <a-col :span="12" v-for="index of 10" :key="index">
            <a-form-model-item :label="costArr[index - 1].label" >
              <a-input  v-model="form['cost'+index]" placeholder="请输入费用" />
            </a-form-model-item>
          </a-col>
        </a-row>
    </a-spin>
    </a-form-model>
    <template slot="footer">
      <a-button  @click="cancel">
        取消
      </a-button>
      <a-button type="primary" :disabled="loading"  @click="submitForm(true)">
        保存
      </a-button>
    </template>
  </ant-modal>
</template>
<script>
import { updateOrderFee  } from '@/api/biz/bizOrder'
import AntModal from '@/components/pt/dialog/AntModal'
export default {
  components: {
    AntModal
  },
  data() {
    return {
      open: false,
      formTitle:'费用编辑',
      form:{},
      rules:{},
      loading:false,
      costArr:[
        {label:'加工'},
        {label:'运费'},
        {label:'安装'},
        {label:'辅材'},
        {label:'售后'},
        {label:'返点'},
        {label:'费用7'},
        {label:'费用8'},
        {label:'费用9'},
        {label:'费用10'},
      ]
    }
  },
  methods: {
    handleEdit(record) {
      this.open = true
      this.form = JSON.parse(JSON.stringify(record))
    },
    cancel(){
      this.open = false
    },
    submitForm(){
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          updateOrderFee(this.form).then(res=>{
            if(res.code == 200) {
              this.$message.success('操作成功')
              this.loading = false
              this.open = false
              this.$emit('ok')
            }else{
              this.$message.error(res.msg)
            }
          }).catch((err)=>{
              console.log('err >>',err) 
              this.loading = false
          }) 
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
  .table-operations,
  body tr.ant-table-expanded-row:hover .table-operations {
    padding-bottom: 8px;
    text-align: right;
  }

  .table-operations {
    margin-bottom: 16px;
  }

  .table-operations>button,
  .table-operations .ant-input-affix-wrapper {
    margin-right: 8px;
  }

  .table_title {
    float: left;
    padding-left: 8px;
    font-weight: 600;
    color: #222222;
    line-height: 30px;
  }
</style>


<style type="text/css">
  
.multiple_table_row{
    background-color: #ed9090;
    /* color: white; */
  }
  .multiple_table_row:hover{
    color: inherit;
  } 
</style>